<template>
  <div class="edit_b_content">
    <div v-for="(item, index) in data.list" :key="index" class="work-list">
      <ul class="info_list clearfix">
        <li>
          <b>公司名称</b>
          <input type="text" maxlength="100" v-model="item.titleName" @input="inputAction"
          placeholder="请输入公司名称"/>
        </li>
        <li>
          <b>职位</b>
          <input type="text" v-model="item.roleName" @input="inputAction" placeholder="请输入职位" class="input">
        </li>
        <li>
          <b>工作时间</b>
          <input type="text" v-model="item.time" @input="inputAction" placeholder="请输入项目时间" class="input">
        </li>
      </ul>
      <div class="resume-edit">
        <resume-edit cur-id="work" @inputValue="inputValue" :cur-index="index" :msg="item.content || ''" />
      </div>
      <div class="btn_box">
        <div class="btn_up" v-if="index === 0 && data.list.length > 1" @click="downAction(index, item)">下移</div>
        <div class="btn_up" v-if="index > 0 && data.list.length > 1" @click="upAction(index, item)">上移</div>
        <div class="btn_remove" @click="removeAction(index)">删除</div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { defineEmits, defineProps, reactive, ref, watch } from 'vue';
import { ElMessageBox } from 'element-plus';
import resumeEdit from './EditorAction.vue';

const emit = defineEmits(['work-input']);
const props = defineProps({
  nums: {
    type: Number,
    default: 1,
  },
  initData: {
    type: Array,
    default: () => [],
  },
});
const data = reactive({
  list: [
    { titleName: '', roleName: '', time: '', content: '' }
  ],
});

watch(() => props.nums, (val) => {
  if (val) {
    data.list.push({ titleName: '', roleName: '', time: '', content: '' });
  }
});

watch(() => props.initData, (val) => {
  if (val && val.length) {
    data.list = val;
  }
}, { immediate: true });

const inputAction = () => {
  emit('work-input', JSON.stringify(Object.assign(data, { type: 'work' })));
};

const downAction = (index, item) => {
  ElMessageBox.confirm(
    '确定将第1条内容，后移到第2条吗？',
    '提示',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
      draggable: true,
    }
  ).then(() => {
    data.list.splice(index + 1, 0, data.list.splice(index, 1)[0]);
    console.log(data.list);
    emit('work-input', JSON.stringify(Object.assign(data, { type: 'work' })));
  });
};

const upAction = (index, item) => {
  ElMessageBox.confirm(
    `确定将第${index+1}条内容，前移到第${index}条吗？`,
    '提示',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
      draggable: true,
    }
  ).then(() => {
    data.list.splice(index - 1, 0, data.list.splice(index, 1)[0]);
    emit('work-input', JSON.stringify(Object.assign(data, { type: 'work' })));
  });
};

const removeAction = (index) => {
  ElMessageBox.confirm(
    `删除后无法恢复，确定删除第${index+1}条工作经验吗?`,
    '温馨提醒',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
      draggable: true,
    }
  ).then(() => {
    data.list.splice(index, 1);
    emit('work-input', JSON.stringify(Object.assign(data, { type: 'work' })));
  });
};

const inputValue = (res) => {
  let { value, index } = res;
  data.list[index].content = value;
  emit('work-input', JSON.stringify(Object.assign(data, { type: 'work' })));
};
</script>
<style>
.work-list {
  margin-bottom: 20px;
  border-bottom: 1px dashed #ffc69f;
  padding-bottom: 20px;
}
.work-list:last-child {
  border: none;
}
</style>


